 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     /* 背景颜色渐变 */
     background: linear-gradient(135deg, #a6ea66 5%, #764ba2 100%);
     min-height: 100vh;
     padding: 20px;
     /* 弹性盒子 */
     display: flex;
     /* 水平居中 */
     justify-content: center;
     align-items: center;
 }

 #chat-container {
     width: 100%;
     max-width: 800px;
     height: 80vh;
     background: rgba(255, 255, 255, 0.95);
     border-radius: 20px;
     /* 阴影 */
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
     display: flex;
     /* 垂直方排列 */
     flex-direction: column;
     overflow: hidden;
 }

 #header {
     background: linear-gradient(135deg, #4CAF50, #45a049);
     color: white;
     padding: 20px;
     text-align: center;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 #header h2 {
     margin: 0;
     font-size: 1.5em;
     /* 1em = 16px*/
     font-weight: 300;
 }

 #config-info {
     font-size: 0.8em;
     opacity: 0.9;
     margin-top: 5px;
 }

 #messages {
     flex: 1;
     /* 纵向滚动条 */
     overflow-y: auto;
     padding: 20px;
     background: #f8f9fa;
 }

 .msg {
     margin: 15px 0;
     display: flex;
     align-items: flex-start;
     animation: fadeIn 0.3s ease-in;
 }

 @keyframes fadeIn {

     /* from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
            */
     0% {
         /* 透明度 */
         opacity: 0;
         transform: translateY(10px);
     }

     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .bot {
     justify-content: flex-start;
 }

 .msg-content {
     max-width: 70%;
     padding: 12px 16px;
     border-radius: 18px;
     line-height: 1.4;
     position: relative;
 }

 .user .msg-content {
     background: linear-gradient(135deg, #007bff, #0056b3);
     color: white;
     margin-left: auto;
 }

 .bot .msg-content {
     background: white;
     color: #333;
     border: 1px solid #e9ecef;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }

 .sender {
     font-weight: 600;
     font-size: 0.8em;
     margin-bottom: 4px;
     opacity: 0.8;
 }

 #input-area {
     padding: 20px;
     background: white;
     border-top: 1px solid #e9ecef;
     display: flex;
     gap: 10px;
     align-items: center;
 }

 #user-input {
     flex: 1;
     padding: 12px 16px;
     border: 2px solid #e9ecef;
     border-radius: 25px;
     font-size: 14px;
     outline: none;
     transition: all 0.3s ease;
 }

 #user-input:focus {
     border-color: #007bff;
     box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
 }

 #send-btn,
 #clear-btn {
     padding: 12px 20px;
     border: none;
     border-radius: 25px;
     font-size: 14px;
     font-weight: 600;
     /* 手的标识 */
     cursor: pointer;
     transition: all 0.3s ease;
     min-width: 80px;
 }

 #send-btn {
     background: linear-gradient(135deg, #007bff, #0056b3);
     color: white;
 }

 #send-btn:hover:not(:disabled) {
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
 }

 #send-btn:disabled {
     background: #6c757d;
     cursor: not-allowed;
     transform: none;
 }

 #clear-btn {
     background: #6c757d;
     color: white;
 }

 #clear-btn:hover {
     background: #5a6268;
     transform: translateY(-2px);
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 @media (max-width: 768px) {
     body {
         padding: 10px;
     }

     #chat-container {
         height: 90vh;
         border-radius: 10px;
     }

     .msg-content {
         max-width: 85%;
     }

     #input-area {
         padding: 15px;
         flex-direction: column;
         gap: 10px;
     }

     #user-input {
         width: 100%;
     }

     .button-group {
         display: flex;
         gap: 10px;
         width: 100%;
     }

     #send-btn,
     #clear-btn {
         flex: 1;
     }
 }